<template>
  <div class="component-chat">
    <ChatItem class="c-item1" title="记忆管理" :icon="require('@/assets/chat/record@2x(1).png')" show-right right-text="添加内容" @clickRight="openAddMemory">
      <div class="jiyi-list">
        <div class="jiyi-item" v-for="item in memoryList" :key="item.id">
          <img style="width: 12px;height: 12px;margin-right: 12px" src="@/assets/chat/bianji-2@2x.png" alt="" @click="item.input = true">
          <div v-if="item.input" style="flex-grow: 1;overflow:hidden;">
            <input type="text" v-model="item.memory" @blur="item.input = false" autofocus>
          </div>
          <span v-else class="jiyi-content text ellipsis">{{ item.memory }}</span>
          <span class="line"></span>
          <span class="create_time text">{{ item.time_str }}</span>
          <img class="delicon" style="width: 5px;height: 6px" src="@/assets/chat/编组%205@2x.png" alt="">
        </div>
      </div>
    </ChatItem>
    <ChatItem class="c-item2" title="当先会话记忆" :icon="require('@/assets/chat/record@2x.png')" show-right right-text="添加内容" @clickRight="openChat">
      <div class="jiyi-list">
        <div class="jiyi-item" v-for="item in memoryList2" :key="item.id">
          <img style="width: 12px;height: 12px;margin-right: 12px" src="@/assets/chat/bianji-2@2x.png" alt="" @click="item.input = true">
          <div v-if="item.input" style="flex-grow: 1;overflow:hidden;">
            <input type="text" v-model="item.memory" @blur="item.input = false" autofocus>
          </div>
          <span v-else class="jiyi-content text ellipsis">{{ item.memory }}</span>
          <span class="line"></span>
          <span class="create_time text">{{ item.time_str }}</span>
          <img class="delicon" style="width: 5px;height: 6px" src="@/assets/chat/编组%205@2x.png" alt="">
        </div>
      </div>
    </ChatItem>
    <ChatItem class="c-item3" title="用量分析备份" :icon="require('@/assets/chat/fenxi@2x.png')" :show-right="false" >
      <div class="drawer-list">
        <div class="drawer-item" v-for="item in drawerList" :key="item.id">
          <div class="drawer-icon">
            <img style="width: 24px;height: 24px" src="@/assets/chat/liuliangbaoguanli@2x.png" alt="">
          </div>
          <div class="drawer-content">
            <div class="drawer-name">{{ item.package_name }}</div>
            <div class="drawer-type">已使用{{ item.used_count_total }}次</div>
          </div>
          <div class="drawer-right">
            <img style="width: 14px;height: 9px" src="@/assets/chat/shuliang@2x.png" alt="">
            <div class="drawer-name">{{ item.total_token }}可用</div>
          </div>
        </div>
      </div>
    </ChatItem>
    <ChatItem class="c-item4" title="角色服务次数备份" :icon="require('@/assets/chat/ABSxitong-jiaosetubiao@2x.png')" :show-right="false" >
      <div class="chart-box">
        <div class="chart"></div>
       <div class="legend-list">
        <div class="legend-item" v-for="item in legendList">
          <div class="dot" :style="{ backgroundColor: item.color }"></div>
          <div class="legend-text">{{ item.name }}</div>
        </div>
      </div>
      </div>
    </ChatItem>
    <ChatItem class="c-item5" title="会话内容分析备份" :icon="require('@/assets/chat/liefenxi@2x.png')" :show-right="false" >
      <div class="chart-box">
        <div class="chart"></div>
        <div class="chart-desc">
          <div class="desc-item" v-for="item in chart5DescList">
            <div class="desc-item-content">
              <div class="dot" :style="{ backgroundColor: item.color }"></div>
              <div class="desc-text">{{ item.text }}</div>
            </div>
          </div>
        </div>
      </div>
    </ChatItem>
  </div>
</template>
<script setup>
// import { app_store_list,app_recommand,getUserPackageDataListForSale,payAppStoreUserData } from '@/api/chat.ts'

/**
 * import {
 *   getMemoryDataList
 * } from '@/api/chat.ts'
 */
import ChatItem from './ChatItem.vue'
import {onActivated, ref} from 'vue'
const memoryList =  ref([
  {
    "_id": '_id',
    "memory": 'memory',
    "time_str": 'time_str'
  },
  {
    "_id": '_id',
    "memory": 'memory',
    "time_str": 'time_str'
  }
  ,
  {
    "_id": '_id',
    "memory": 'memory',
    "time_str": 'time_str'
  }
])
const memoryList2 = ref([
  {
    "_id": '_id',
    "memory": 'memory',
    "time_str": 'time_str'
  }
])
const drawerList = ref([
  {
    package_name: 'package_name',
    used_count_total: 1,
    total_token: 1
  }
])
const legendList = ref([
  {
    // 客服智能体：78次
    id: 1,
    name: '客服智能体：78次',
    count: 78,
    color: '#0561C6'
  },
  {
    // 客服智能体：78次
    id: 2,
    name: '客服智能体：78次',
    count: 57,
    color: '#07B2ED'
  },
  {
    // 客服智能体：78次
    id: 3,
    name: '客服智能体：78次',
    count: 60,
    color: '#88D311'
  },
  {
    // 客服智能体：78次
    id: 4,
    name: '客服智能体：78次',
    count: 57,
    color: '#F9C041'
  }
])
function openAddMemory() {
  console.log('openAddMemory')
}
function openChat() {
  console.log('openChat')
}

const chart5DescList = ref([
  {
    color: '#5C5EE6',
    text: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试'
  }
])
function initData() {
  getMemoryDataList({
    mem_type: 1
  }).then(res => {
    memoryList.value = res.data.data
  })
}
onActivated(() => {

})
</script>
<style lang="scss">
.dark {
  .component-chat {
    .c-item {
      background: #24272E;
    }
    .drawer-list {
      .drawer-name {
        color: #FFFFFF;
      }
      .drawer-type  {
        color: #7B7D80;
      }
      .drawer-item {
        border-bottom-color: #7B7D80;
      }
      .drawer-icon {
        background: #63E2B7;
      }
    }
    .jiyi-list {
      .jiyi-item {
        background: #24272E;
      }
      input {
        color: #999;
        font-size: 13px;
      }
    }
  }

}
.component-chat {
  height: 100%;
  overflow: auto;
  input {
    background: transparent;
    border: none;
    outline: none;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    padding: 0;
  }
  .chart-box {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .legend-list {
    width: 100%;
    background: #24272E;
    border-radius: 4px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 6px 0 0 0;
    padding-bottom: 5px;
    .legend-item {
      width: 50%;
      height: 34px;
      padding-left: 20px;
      padding-bottom: 0px;
      display: flex;
      align-items: center;
      .dot {
        flex-shrink: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .legend-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 10px;
        color: #FFFFFF;
        opacity: 0.8;
        line-height: 14px;
        text-align: left;
      }
    }
  }
  .chart-desc {
    width: 100%;
    height: 64px;
    background: #24272E;
    border-radius: 4px;
    overflow: auto;
    .desc-item {
      padding: 12px 17px;
    }
    .desc-item-content {
      display: flex;
      .dot {
        margin-top: 5px;
        flex-shrink: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .desc-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 10px;
        color: #FFFFFF;
        opacity: 0.8;
        line-height: 14px;
        text-align: left;
      }
    }
  }
  .drawer-list {
    padding: 10px;
    .drawer-item {
      display: flex;
      align-items: center;
      padding: 13px 0 19px 0;
      border-bottom: 1px solid;
    }
    .drawer-content {
      flex-grow: 1;
      height: 45px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .drawer-name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
      text-align: left;
    }
    .drawer-type {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      line-height: 17px;
      text-align: left;
    }
  }
  .drawer-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
  }
  .drawer-right {
    display: flex;
    align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
  }
  .delicon {
    position: absolute;
    right: 3px;
    top: 3px;
  }
  .line {
    margin: 0 7px;
    width: 1px;
    height: 13px;
    background-color: #7B7D80;
    flex-shrink: 0;
  }
  .jiyi-list {
  }
  .jiyi-item {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 42px;
    border-radius: 4px;
    margin-top: 10px;
    padding: 0 6px;
    img {
      flex-shrink: 0;
    }
    .jiyi-content {
      flex-grow: 1;
      text-align: left;
      padding-right: 13px;
    }
    .create_time {
      flex-shrink: 0;
      width: 70px;
      text-align: center;
    }
    .text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 17px;
    }
  }
  .drawer-item {

  }
}
</style>
